<template>
  <view class="container">
    <!-- 装饰背景 -->
    <view class="bg-decoration bg-left"></view>
    <view class="bg-decoration bg-right"></view>
    
    <view class="form-card">
      <text class="form-title">账号注册</text>

      <!-- 用户名 -->
      <view class="input-wrapper">
        <uni-icons type="person" size="22" color="#666" class="input-icon"></uni-icons>
        <input 
          v-model="form.username" 
          class="input-field" 
          placeholder="请输入用户名" 
          placeholder-class="input-placeholder"
        />
      </view>

      <!-- 密码 -->
      <view class="input-wrapper">
        <uni-icons type="locked" size="22" color="#666" class="input-icon"></uni-icons>
        <input 
          v-model="form.password" 
          type="password" 
          class="input-field" 
          placeholder="请输入密码" 
          placeholder-class="input-placeholder"
        />
      </view>

      <!-- 确认密码 -->
      <view class="input-wrapper">
        <uni-icons type="locked" size="22" color="#666" class="input-icon"></uni-icons>
        <input 
          v-model="form.confirmPwd" 
          type="password" 
          class="input-field" 
          placeholder="请确认密码" 
          placeholder-class="input-placeholder"
        />
      </view>

      <!-- 昵称 -->
      <view class="input-wrapper">
        <uni-icons type="smile" size="22" color="#666" class="input-icon"></uni-icons>
        <input 
          v-model="form.nickname" 
          class="input-field" 
          placeholder="请输入昵称" 
          placeholder-class="input-placeholder"
        />
      </view>

      <!-- 手机号 -->
      <view class="input-wrapper">
        <uni-icons type="phone" size="22" color="#666" class="input-icon"></uni-icons>
        <input 
          v-model="form.mobile" 
          type="number" 
          class="input-field" 
          placeholder="请输入手机号" 
          placeholder-class="input-placeholder"
        />
      </view>

      <!-- Email -->
      <view class="input-wrapper">
        <uni-icons type="email" size="22" color="#666" class="input-icon"></uni-icons>
        <input 
          v-model="form.email" 
          class="input-field" 
          placeholder="请输入Email" 
          placeholder-class="input-placeholder"
        />
      </view>

      <!-- 注册按钮 -->
      <button 
        class="action-btn" 
        type="primary" 
        @click="handleRegister"
        :disabled="isSubmitting"
      >
        <text class="btn-text">{{ isSubmitting ? '注册中...' : '注册' }}</text>
      </button>

      <!-- 登录跳转 -->
      <view class="link-area">
        <text class="link-text">已有账号？</text>
        <navigator url="/pages/login/login" class="link-btn">去登录</navigator>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
        confirmPwd: '',
        nickname: '',
        mobile: '',
        email: ''
      },
      isSubmitting: false 
    };
  },
  methods: {
    handleRegister() {
      // 保留原有注册逻辑
      if (!this.form.username || !this.form.password || !this.form.confirmPwd) {
        uni.showToast({ title: '请输入用户名、密码及确认密码', icon: 'none' });
        return;
      }
      if (this.form.password.length < 4) {
        uni.showToast({ title: '密码不少于4位', icon: 'none' });
        return;
      }
      if (this.form.password !== this.form.confirmPwd) {
        uni.showToast({ title: '密码不一致', icon: 'none' });
        return;
      }

      this.isSubmitting = true;
      uni.showLoading({ title: '注册中...' });

      uniCloud.callFunction({
        name: 'addUser',
        data: {
          name: this.form.username,
          password: this.form.password,
          nickname: this.form.nickname,
          mobile: this.form.mobile,
          email: this.form.email
        },
        success: (msg) => {
          console.log("addUser callback " + JSON.stringify(msg));
          uni.hideLoading();
          uni.showToast({ title: "注册成功" });
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        },
        fail: (error) => {
          console.error("addUser fail " + error);
          uni.hideLoading();
          uni.showToast({ 
            title: '连接数据库失败：' + error.message, 
            icon: 'none' 
          });
        },
        complete: () => {
          this.isSubmitting = false;
        }
      });
    }
  }
};
</script>

<style scoped>
/* 全局容器 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #fdf2f8 0%, #fef7fb 100%);
  padding: 30rpx 20rpx;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

/* 装饰背景 */
.bg-decoration {
  position: absolute;
  width: 250rpx;
  height: 250rpx;
  border-radius: 50%;
  opacity: 0.1;
  filter: blur(70rpx);
}

.bg-left {
  top: 15%;
  left: 5%;
  background: linear-gradient(45deg, #9f7aea, #ed8936);
}

.bg-right {
  bottom: 15%;
  right: 5%;
  background: linear-gradient(45deg, #48bb78, #4299e1);
}

/* 表单卡片 */
.form-card {
  width: 100%;
  max-width: 500rpx;
  background: #ffffff;
  padding: 50rpx 35rpx;
  border-radius: 20rpx;
  box-shadow: 0 12rpx 35rpx rgba(159, 122, 234, 0.1);
  position: relative;
  z-index: 1;
}

/* 表单标题 */
.form-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #2d3748;
  text-align: center;
  margin-bottom: 40rpx;
  display: block;
}

/* 输入框容器 */
.input-wrapper {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border-radius: 12rpx;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;
}

/* 输入框悬浮效果 */
.input-wrapper:hover {
  border-color: #9f7aea;
  box-shadow: 0 0 0 4rpx rgba(159, 122, 234, 0.1);
}

/* 输入框图标 */
.input-icon {
  margin-right: 15rpx;
}

/* 输入框样式 */
.input-field {
  flex: 1;
  height: 88rpx;
  font-size: 28rpx;
  color: #2d3748;
  background: transparent;
  border: none;
  outline: none;
}

/* 占位符样式 */
.input-placeholder {
  color: #a0aec0;
  font-size: 26rpx;
}

/* 注册按钮 */
.action-btn {
  width: 100%;
  height: 90rpx;
  background: linear-gradient(90deg, #9f7aea 0%, #4299e1 100%);
  border-radius: 12rpx;
  border: none;
  margin-top: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 6rpx 16rpx rgba(159, 122, 234, 0.3);
  transition: all 0.3s ease;
}

.action-btn:active {
  transform: scale(0.98);
  box-shadow: 0 3rpx 8rpx rgba(159, 122, 234, 0.2);
}

/* 禁用状态按钮 */
.action-btn[disabled] {
  background: #cbd5e0 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* 按钮文字 */
.btn-text {
  font-size: 30rpx;
  font-weight: 500;
  color: #ffffff;
}

/* 链接区域 */
.link-area {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 35rpx;
}

/* 链接文字 */
.link-text {
  font-size: 26rpx;
  color: #718096;
}

/* 登录链接 */
.link-btn {
  font-size: 26rpx;
  color: #9f7aea;
  margin-left: 10rpx;
  text-decoration: none;
  font-weight: 500;
  padding: 5rpx 10rpx;
  border-radius: 6rpx;
  transition: all 0.2s ease;
}

.link-btn:hover {
  background: rgba(159, 122, 234, 0.1);
}
</style>